<template>
	<div class="index">
		<div class="box_2_list">
			<img v-if="noticeRecommend.noticePic" class="recImg" :src="noticeRecommend.noticePic" @click="showGonggaoDetail(noticeRecommend)"/>
			<u-waterfall v-model="dataList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="showGonggaoDetail(item)">
						<image style="width: 100%;" mode="widthFix" :src="item.noticePic"></image>
						<div class="title">
							<u--text color="#222" size="14" :lines="2" :text="item.noticeTitle"></u--text>	
						</div>
						<div class="remark">
							<u--text color="#999" size="12" :lines="2" :text="item.noticeDesc"></u--text>		
						</div>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="showGonggaoDetail(item)">
						<image style="width: 100%;" mode="widthFix" :src="item.noticePic"></image>
						<div class="title">
							<u--text color="#222" size="14" :lines="2" :text="item.noticeTitle"></u--text>	
						</div>
						<div class="remark">
							<u--text color="#999" size="12" :lines="2" :text="item.noticeDesc"></u--text>		
						</div>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore :status="loadStatus" @loadmore="onLower"></u-loadmore>
			<!-- <scroll-view class="scroll-view" 
						:scroll-y="true"
						:refresher-enabled="true"
						:enable-back-to-top="true"
						:scroll-anchoring="true"
						:refresher-triggered="triggered"
						@refresherrefresh="onRefresh"
						@scrolltolower="onLower">
				<div class="box_3" v-for="(item,index) in dataList" :key="index" @click="showGonggaoDetail(item)">
					<div class="title">
						<u--text color="#222" size="14" :lines="2" :text="item.noticeTitle"></u--text>	
					</div>
					<div class="remark">
						<u--text color="#999" size="12" :lines="2" :text="item.noticeDesc"></u--text>		
					</div>
				</div>
				<div class="diver" v-if="finished && dataList.length">
					<u-divider text="没有更多了"></u-divider>
				</div>
				<div class="empty" v-if="!dataList.length">
					<u-empty mode="data" text="暂无公告"></u-empty>
				</div>
			</scroll-view> -->
		</div>
	</div>
</template>

<script>
	import auth from '../../api/auth.js'
	export default {
		data() {
			return {
				pageNum: 1,
				dataList: [],
				loadStatus: 'loadmore',
				noticeRecommend: null  //推荐主图
			};
		},
		onLoad() {
			this.getNoticeList()
			this.getNoticeRecommend()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.$set(this,'dataList',[])
			this.$refs.uWaterfall.clear();
			this.getNoticeList()
			this.getNoticeRecommend()
		},
		methods:{
			onLower() {
				if(this.pageNum < this.goodsCount) {
					this.pageNum++
					this.getNoticeList()
				} else {
					this.loadStatus = 'nomore';
				}
			},
			async getNoticeRecommend() {
				let params = {
					noticeRecommend:1,
					pageNum:this.pageNum,
					pageSize: 10
				}
				let res = await auth.getNoticeList(params)
				this.noticeRecommend = res.data[0]
			},	
			async getNoticeList() {
				this.loadStatus = 'loading';
				let params = {
					noticeRecommend:0,
					pageNum:this.pageNum,
					pageSize: 10
				}
				let res = await auth.getNoticeList(params)
				console.log(this.dataList)
				this.dataList = [...this.dataList,...res.data]
				this.goodsCount = res.pages
				this.loadStatus = 'loadmore';
				if(this.pageNum == this.goodsCount) {
					this.loadStatus = 'nomore';
				}
			},	
			showGonggaoDetail(item) {

				// if(item.jumpType===1) {
				// 	uni.navigateTo({
				// 		url: item.jumpUrl
				// 	})
				// } else {
					uni.navigateTo({
						url: '/pages/GongGao/detail?noticeTitle='+item.noticeTitle + '&noticeDesc='+item.noticeDesc + '&noticePicDesc='+item.noticePicDesc
					})
				// }

			}
		}
	}
</script>

<style lang="scss">
.index {
		height: 100%;
		background: #F5F7F9;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	.box_2_list {
		flex: 1;
		overflow: auto;
		margin: 0 32rpx;
		.recImg {
			width: 100%;
			height: 200rpx;
			margin-top: 30rpx;
		}
		.demo-warter {
			padding: 8px;
			margin: 5px;
			background-color: #ffffff;
			overflow-x: hidden;
			border-radius: 8px;
			.image {
				width: 100%;
			}
		}
		.scroll-view {
			height: 100%;
		}
		.box_3 {
			color: #333;
			background: #fff;
			margin: 24rpx 0;
			overflow: hidden;
			border-radius: 8rpx;
			img {
				width: 100%;
				height: 240rpx;
			}
			.title {
				font-size: 28rpx;
				color: #222;
				padding: 24rpx;
				padding-bottom: 0;
			}
			.remark {
				font-size: 24rpx;
				color: #999;
				padding: 24rpx;
				padding-top: 10rpx;
			}
		}
	}
	.diver {
		margin-bottom: 60rpx;
		overflow: hidden;
	}
	.empty {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
